<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Tutorial Demo</title>

  <style>
    @import './iconfont/iconfont.css';
  </style>
</head>
<body>

<!-- 预先加载字体, 以防图渲染时字体还未下载, 后续可以隐藏 -->
<span class="iconfont">&#xe895;</span>

<!-- 图的画布容器 -->
<div id="mountNode"></div>

<span class="iconfont">&#xe894;</span>

<!-- 引入 G6 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.7.0/dist/g6.min.js"></script>

<script>
  //图渲染iconfont方法
  G6.registerNode('iconfont', {
    draw(cfg, group) {
      const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle } = cfg;

      if (backgroundStyle) {
        group.addShape('circle', {
          attrs: {
            x: 0,
            y: 0,
            r: cfg.size,
            ...backgroundStyle,
          },
          // must be assigned in G6 3.3 and later versions. it can be any value you want
          name: 'circle-shape',
        });
      }

      const keyShape = group.addShape('text', {
        attrs: {
          x: 0,
          y: 0,
          fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
          textAlign: 'center',
          textBaseline: 'middle',
          text: cfg.text,
          fontSize: cfg.size * 1.8,
          ...style,
        },
        // must be assigned in G6 3.3 and later versions. it can be any value you want
        name: 'text-shape1',
      });
      const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;

      group.addShape('text', {
        attrs: {
          x: 0,
          y: labelY,
          textAlign: 'center',
          text: cfg.label,
          ...labelStyle.style,
        },
        // must be assigned in G6 3.3 and later versions. it can be any value you want
        name: 'text-shape1',
      });
      return keyShape;
    },
  });

  // 定义数据源
  const data = {
    // 点集
    nodes: [
      {
        id: 'node1',
        x: 100,
        y: 200,
        label: '1',
        text: '\ue894',
      },
      {
        id: 'node2',
        x: 300,
        y: 200,
        label: '2',
        text: '\ue6b0',
      },
    ],
    // 边集
    edges: [
      // 表示一条从 node1 节点连接到 node2 节点的边
      {
        source: 'node1',
        target: 'node2',
      },
    ],
  };

  const COLOR = '#40a9ff';
  // 创建 G6 图实例
  const graph = new G6.Graph({
    container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
    // 画布宽高
    width: 800,
    height: 500,
    modes: {
      default: ['drag-node', 'drag-canvas', 'zoom-canvas'],
    },
    fitViewPadding: [20, 40, 50, 20],
    defaultNode: {
      backgroundConfig: {
        backgroundType: 'circle',
        fill: COLOR,
        stroke: 'LightSkyBlue',
      },
      type: 'iconfont',
      size: 16,
      style: {
        fill: '#fff',
      },
      labelCfg: {
        style: {
          fill: COLOR,
          fontSize: 16,
        },
      },
    },
  });
  // 读取数据
  graph.data(data);
  // 渲染图
  graph.render();
  // 在 graph.render() 之后调用以下语句：重新渲染字体,避免没有加载到
  setTimeout(() => {
    graph.paint();
  }, 500);
</script>
</body>
</html>
